﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格分页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">

        <h3 class="page-title">表格分页</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">页面元素</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">表格分页</a>
                </li>
            </ul>
        </div>

        <div class="page-table">
            <table class="table tablemvc" data-src="/assets/js/Model/table.js">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>邮件地址</th>
                        <th>手机号码</th>
                        <th>所在分组</th>
                        <th>其它</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1009364337</td>
                        <td>1009364337@qq.com</td>
                        <td>17096358236</td>
                        <td>寂寞组</td>
                        <td>暂无</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="page-pagination">
            <div class="paginfo pull-left">
                当前第<b>1</b>/<b>2</b>页 共<b>14</b>条记录 每页<b>10</b>条&nbsp;
            </div>
            <ul>
                <li class="prev disabled"><a href="#">← Previous</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="next"><a href="#">Next → </a></li>
            </ul>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">表格分页</h3>
            </div>
            <div class="panel-body">
                <pre><code>
                    </code></pre>


            </div>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
    <script src="../../assets/js/plugins/handlebars-v1.3.0.js"></script>
    <script type="text/x-handlebars-template" id="table-template">
        {{#each data}}
        <tr>
            <td>{{name}}</td>
            <td>{{email}}</td>
            <td>{{tel}}</td>
            <td>{{group}}</td>
            <td>{{other}}</td>
        </tr>
        {{/each}}
    </script>

</body>
</html>
